# Typography

## Type scale

The typography scale is designed to work for GitHub's product UI and marketing sites. Font sizes are designed to work in combination with line-height values so as to result in more sensible numbers wherever possible.

Font sizes are smaller on mobile and scale up at the `md` [breakpoint](./breakpoints) to be larger on desktop.

<table>
  <tr>
    <td>Scale</td>
    <td>Font size: mobile</td>
    <td>Font size: desktop</td>
    <td>1.25 line height</td>
    <td>1.5 line height</td>
  </tr>
  <tr>
    <td>00</td>
    <td>40px</td>
    <td>48px</td>
    <td>60</td>
    <td>72</td>
  </tr>
  <tr>
    <td>0</td>
    <td>32px</td>
    <td>40px</td>
    <td>50</td>
    <td>60</td>
  </tr>
  <tr>
    <td>1</td>
    <td>26px</td>
    <td>32px</td>
    <td>40</td>
    <td>48</td>
  </tr>
  <tr>
    <td>2</td>
    <td>22px</td>
    <td>24px</td>
    <td>30</td>
    <td>36</td>
  </tr>
  <tr>
    <td>3</td>
    <td>18px</td>
    <td>20px</td>
    <td>25</td>
    <td>30</td>
  </tr>
  <tr>
    <td>4</td>
    <td>16px</td>
    <td>16px</td>
    <td>20</td>
    <td>24</td>
  </tr>
  <tr>
    <td>5</td>
    <td>14px</td>
    <td>14px</td>
    <td>17.5</td>
    <td>21</td>
  </tr>
  <tr>
    <td>6</td>
    <td>12px</td>
    <td>12px</td>
    <td>15</td>
    <td>18</td>
  </tr>
</table>

The typography scale is used to create [typography utilities](/utilities/typography).

## Typography variables

### Font size variables

```css
// Heading sizes - mobile
// h4—h6 remain the same size on both mobile & desktop
$h00-size-mobile: 40px;
$h0-size-mobile: 32px;
$h1-size-mobile: 26px;
$h2-size-mobile: 22px;
$h3-size-mobile: 18px;

// Heading sizes - desktop
$h00-size: 48px;
$h0-size: 40px;
$h1-size: 32px;
$h2-size: 24px;
$h3-size: 20px;
$h4-size: 16px;
$h5-size: 14px;
$h6-size: 12px;
```

### Font weight variables

```css
$font-weight-bold: 600 !default;
$font-weight-light: 300 !default;
```

### Line height variables

```css
$lh-condensed-ultra: 1 !default;
$lh-condensed: 1.25 !default;
$lh-default: 1.5 !default;
```

## Typography mixins

Typography mixins are available for heading styles and for our type scale. They can be used within components or custom CSS. The same styles are also available as [utilities](/utilities/typography#heading-utilities). which requires no additional CSS.

Heading mixins are available for `h1` through to `h6`, this includes the font-size and font-weight. Example:

```css
.styles {
  @include h1;
}
```

Responsive heading mixins can be used to adjust the font-size between the `sm` and `lg` breakpoint. Only headings 1—3 are responsive. Heading 4—6 are small enough to remain the same between mobile and desktop. Responsive heading mixins include the font-size and font-weight as well as the media query. To use a responsive heading mixin, postfix the heading with `-responsive`:

```css
.styles {
  @include h1-responsive;
}
```

Responsive type scale mixins are also available. Type scale mixins apply a font-size that gets slightly bigger at the `lg` breakpoint. They do not apply a font-weight. Like the responsive heading mixins, they are only available for size `f1` to `f3` and are postfixed with `-responsive` as in the example below:

```css
.style {
  @include f1-responsive;
}
```
